<template>
  <div class="home">
    <div class="home_header">
      <div class="dropdown">
      <el-dropdown>
        <span class="el-dropdown-link">
         下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      </div>
    </div>
    <div class="home_container">
       <div class="home_aside"></div>
       <div class="home_content">
         <el-row :gutter="10">
           <el-col 
           :xs="24" 
           :sm="8" 
           :md="6" 
           v-for="(item,index) in data"
           :key="index"><div class="item_container">{{item}}</div></el-col>
         </el-row>
    </div>
    </div>
    <div class="loading_container"
    v-customShow="isShowLoading">
      <img src="../assets/loading.gif"/>
    </div>
  </div>
</template>


<script>
// @ is an alias to /src


export default {
  name: 'Home',
  components: {
    
  },
  data(){
    return{
      isShowLoading:false,
      data:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
    }
  },
  mounted(){
    window.addEventListener("scroll",()=>{
      //获取文档的高度 
      var docHeight = document.documentElement.scrollHeight;

      //获取当前窗口的高度（可视区域）
      var client = document.documentElement.clientHeight;

      //获取滚动的距离
      var scrollOffset = document.documentElement.scrollTop;

      if(docHeight-client-scrollOffset === 0){
        window.console.log("已到达文档底部")
        this.isShowLoading = true;
        //执行异步请求
        window.setTimeout(()=>{
          for(let index=21;index<40;index++){
            this.data.push(index)
          }
          // http://localhost:8080/data${this.page}.json
          this.isShowLoading = false;
        },3000)
      }
    })
  },
  directives:{
    customShow:{
      bind(){

      },
      inserted(el,binding){
        if(binding.value){
          el.style.visibility = "visible"
        }else{
          el.style.visibility = "hidden"
        }
      },
      update(el,binding){
        if(binding.value){
          el.style.visibility = "visible"
        }else{
          el.style.visibility = "hidden"
        }
      }
    }
  }
}
</script>

<style scoped>
/* .home
{
  width: 100%;
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
} */
.home_header
{
  width: 100%;
  height: 80px;
  background-color: pink;
}

.home_container
{
  width: 100%;
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
}



.item_container
{
  height: 300px;
  background-color: red;
  margin: 10px 0px;
}

.home_aside
{
  width: 20%;
  background-color: green;
  height: 1000px;
}

.home_content
{
  width: 80%;
  background-color: skyblue;
}

.dropdown
{
  display: none;
}

.loading_container
{
  width: 100%;
  height: 100px;
  /* background-color: hotpink; */
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.loading_container img
{
  width: 100px;
  /* height: 100px; */
}

@media screen and (max-width: 768px){
  .item_container
  {
    height: 100px;
  }
  .home_aside
  {
    display: none;
  }
  .dropdown
  {
    display: block;
  }
  .home_content
  {
    width: 100%;
  }
}

</style>
